<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            display: flex;
        }

        ul {
            list-style: none;
            text-align: left;
            width: 200px;
            background-color: rgb(38, 36, 36);
            color: white;
        }
        ul li{
            box-sizing: border-box;
            padding-left: 40px;
            width: 200px;
            height: 40px;
            border: 1px solid aqua;
            background-color: black;
        }
        ul li:hover{
            background-color: blue;
            cursor: pointer;
        }
        ul li:nth-child(5){
            background-color: blue;
        }
        .content span {
            margin-left: 15px;
        }

        .content .tubiao {
            flex: 1;
            border: 1px solid grey;
            padding: 20px;
        }

        .content .tubiao input {
            width: 200px;
            height: 20px;
            border-radius: 10px;
            padding-left: 20px;
        }

        .content .tubiao h3 {
            position: fixed;
            top: 20px;
            right: 50px;
        }

        .content .tubiao .shu {
            display: flex;
            justify-content: space-between;
            height: 50px;
            background-color: rgb(246, 239, 239);
            margin-top: 15px;
            line-height: 50px;
        }
        .content .tubiao .data{
            display: flex;
            justify-content: space-between;
        }
        .content .tubiao .data .line {
            margin-top: 40px;
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
        .content .tubiao .data .baner{
            width: 600px;
            height: 400px;
            margin-top: 40px;
            border: 1px solid black;
        }
        .content .tubiao .buttom{
            margin-top: 10px;
            width: 600px;
            height: 80px;
            background-color:rgb(230, 225, 225);
        }
        .content .tubiao .box{
            display: flex;
            justify-content: space-between;
        }
        .content .tubiao .buttom span{
            line-height: 80px;
            margin-right: 50px;
        }
        .content .tubiao .buttom span{
            line-height: 80px;
            margin-right: 50px;
        }
        .content .tubiao .box1{
            display: flex;
            justify-content: space-between;
        }
        .content .tubiao .box1 .butt{
            margin-top: 20px;
            width: 600px;
            height: 1px;
            background-color: black;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <!-- 内容区 -->
    <div class="content">
        <ul>
            <li class="iconfont icon-shanchu"><span>china</span></li>
            <li class="iconfont icon-yonghu"><span>china</span></li>
            <li class="iconfont icon-xitongrizhi"><span>china</span></li>
            <li class="iconfont icon-yonghu"><span>China</span></li>
            <li class="iconfont icon-yonghu"><span>America</span></li>
            <li class="iconfont icon-yonghu"><span>Japan</span></li>
            <li class="iconfont icon-shanchu"><span>Russia</span></li>
            <li class="iconfont icon-shezhi"><span>Egypt</span></li>
            <li class="iconfont icon-bianji"><span>Greece</span></li>
            <li class="iconfont icon-yonghu"><span>France</span></li>
            <li class="iconfont icon-yonghu"><span>Germany</span></li>
            <li class="iconfont icon-yonghu"><span>France</span></li>
            <li class="iconfont icon-yonghu"><span>Germany</span></li>
            <li class="iconfont icon-yonghu"><span>Germany</span></li>
            <li class="iconfont icon-yonghu"><span>Egypt</span></li>
            <li class="iconfont icon-yonghu"><span>Greece</span></li>
            <li class="iconfont icon-yonghu"><span>china</span></li>
            <li class="iconfont icon-yonghu"><span>china</span></li>
        </ul>
        <div class="tubiao">
            <span class="iconfont icon-xitongrizhi"></span>
            <span>HOME</span>
            <span>CONTEXT</span>
            <input type="text" placeholder="very good">
            <h3>HOME/ Document v3</h3>
            <div class="shu">
                <span>Dashboard v3</span>
                <span>HOME</span>
            </div>
            <div class="data">
                <div class="line"></div>
                <div class="baner"></div>
            </div>
            <div class="box">
                <div class="buttom">
                    <span>Products</span>
                    <span>products</span>
                    <span>prod</span>
                    <span>ducts</span>
                    <span>prod</span>
                </div>
                <div class="buttom">
                    <span>Online Store Overview</span>
                </div>
            </div>
            <div class="box1">
                <div class="butt">
                    <span>welcome to qianfeng</span>
                </div>
                <div class="butt">
                    <span class="iconfont icon-bianji">www.qiangfeng.com</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script>
    var con = document.querySelector('.tubiao>.data>.line');
    var e = echarts.init(con);
    //2.绘制图表
    e.setOption({
        title: { //图表的标题
            text: 'visitors Over Time'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'line',
                data: [10, 12, 17, 16, 18, 17, 16],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'line',
                data: [10, 18, 27, 19, 20, 28, 20],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });

    // =====================================
    var con = document.querySelector('.tubiao>.data>.baner');
    var e2 = echarts.init(con);
    //2.绘制图表
    e2.setOption({
        title: { //图表的标题
            text: 'Sales'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['JUN','JUL','AUG','SEP','OCT','NOV','DEC']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'bar',
                data: [100, 120, 170, 165, 180, 178, 160],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'bar',
                data: [60, 80, 70, 65, 80, 78, 100],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });

</script>